<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav flex-between-center">
      <span @click="fn.back()" class="mui-action-back"
        ><img class="back-btn" src="../../../../static/images/back.png"
      /></span>
      <div class="header-search keyworld-search">
        <i class="search-icon" @click="search"></i>
        <input type="search" v-model="keyword" placeholder="请输入关键词搜索" />
      </div>
    </header>
    <div class="mui-table-view organization-lists record-member-lists">
      <div class="mui-table-view organization-lists record-member-lists">
        <div class="mui-table-view organization-lists record-member-lists">
          <div
            class="mui-table-view organization-lists mui-scroll"
            style="
              position: absolute;
              top: 0px;
              bottom: 0;
              height: calc(100vh - 60px);
            "
          >
            <cube-scroll
              ref="scroll"
              :options="options"
              @pulling-up="onPullingUp"
            >
              <cube-swipe>
                <transition-group name="swipe" tag="div">
                  <div
                    class="mui-table-view-cell"
                    v-for="(data, index) in swipeData"
                    :key="data.partyGroupId"
                  >
                    <li
                      @click="detail"
                      class="mui-table-view-cell flex-between-center"
                    >
                      <div class="mine-lists-content lists-input">
                        <h2
                          class="organization-lists-title"
                          v-html="data.partyGroupName"
                        ></h2>
                        <div class="mine-lists-tips">
                          应缴党费:
                          <span class="organization-lists-title"
                            >￥{{ data.shouldPay }}</span
                          >，实缴党费:<span class="organization-lists-title"
                            >￥{{ data.realPay }}</span
                          >
                        </div>
                      </div>
                      <p v-if="data.shouldPay === data.realPay">已完成</p>
                      <p
                        v-if="data.shouldPay !== data.realPay"
                        class="mine-lists-money"
                      >
                        未完成
                      </p>
                    </li>
                  </div>
                </transition-group>
              </cube-swipe>
              <!-- <div class="text-center no-data" v-if="swipeData.length === 0">
                <img src="../../../../static/images/no_data.png" alt="" />
                <p>暂无数据</p>
              </div> -->
              <!-- W noData -->
              <noData v-if="swipeData.length === 0"></noData>
              <onBottom v-else-if="onBottom"></onBottom>
            </cube-scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import paymentFooterbar from "../common/paymentFooterbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";
export default {
  components: {
    paymentFooterbar,
  },
  name: "paymentSearch",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      infinite: true,
      pageIndex: 0,
      pageSize: 20,
      isLoading: false,
      year: "",
      _time: "",
      isShowFilter: false,
      isFinished: -1,
      payStatus: "",
      keyword: "",
      yearMonth: "",
    };
  },
  created() {
    this._time = this.$route.params.yearMonth;
    this.yearMonth = moment(this._time).format("YYYY-MM");
    this.payStatus = this.$route.params.payStatus;
    if (this.payStatus === "2") {
      this.payStatus = "";
    }
    this.loadData();
  },
  watch: {
    keyword(newValue, oldValue) {
      this.search();
    },
  },
  methods: {
    loadData() {
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        partyGroupName: this.keyword,
        payStatus: this.payStatus,
        yearMonth: this.yearMonth,
      };
      loginService.getPartyGroupPayStatus(data).then((res) => {
        if (
          res.code === 200 &&
          res.data.partyChargeGroupPayStatusList.length < 1
        ) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip("已无更多数据");
        }
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(
          res.data.partyChargeGroupPayStatusList
        );
        let searchReg = new RegExp(`${this.keyword}`, "g");
        let searchReplace = `<span class="text-red">${this.keyword}</span>`;
        res.data.partyChargeGroupPayStatusList.forEach((v, i) => {
          // 标红字体
          if (this.keyword.length > 0) {
            v.partyGroupName = v.partyGroupName.replace(
              searchReg,
              searchReplace
            );
          }
        });
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    reloadData() {
      this.swipeData = [];
      this.pageIndex = 0;
      this.loadData();
    },
    detail() {
      this.$router.push({ path: `/paymentDetails/${this._time}` });
    },
    search() {
      this.reloadData();
    },
  },
};
</script>

<style scoped="" lang="scss">
.swiper-no-swiping {
  transform: translateX(0) !important;
}
.mui-pages {
  background: #fff;
}
</style>
